Motion >> Repos - motion-next.git/blob

   1 <div id="dispositions" class="page-layout simple left-sidenav inner-sidenav">
   2   <!-- HEADER -->
   3   <div
   4     class="header md-accent-bg"
   5     layout="row"
   6     layout-align="space-between center"
   7   >
   8     <!-- APP TITLE -->
   9     <div layout="row" layout-align="start center">
  10       <div class="logo" layout="row" layout-align="start center">
  11         <span class="logo-icon">
  12           <md-icon md-font-icon="icon-auto-fix" class="s24"></md-icon>
  13         </span>
  14         <span class="logo-text" translate="TOOLS.DISPOSITIONS"
  15           >Dispositions</span
  16         >
  17       </div>
  18     </div>
  19     <!-- / APP TITLE -->
  20     <div layout="row">
  21       <!-- SEARCH -->
  22       <div
  23         class="search-input-wrapper"
  24         layout="row"
  25         layout-align="start center"
  26       >
  27         <label for="search">
  28           <md-icon md-font-icon="icon-magnify"></md-icon>
  29         </label>
  30         <md-input-container md-no-float class="m-0">
  31           <input
  32             id="search"
  33             placeholder="Search for anyone"
  34             type="text"
  35             ng-model="vm.query.filter"
  36             ng-model-options="{ debounce: 1000 }"
  37             translate
  38             translate-attr-placeholder="TOOLS.SEARCH_FOR_ANYONE"
  39           />
  40         </md-input-container>
  41       </div>
  42       <!-- / SEARCH -->
  43     </div>
  44   </div>
  45   <!-- / HEADER -->
  46   <!-- SELECTED BAR -->
  47   <div
  48     ng-show="vm.selectedDispositions.length > 0"
  49     class="selected-bar header animate-slide-down md-accent-bg"
  50     layout="row"
  51     layout-align="start center"
  52   >
  53     <div class="close-button-wrapper" ng-click="vm.selectedDispositions = []">
  54       <md-button layout="row" layout-align="start center">
  55         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  56         <span translate="TOOLS.BACK">Back</span>
  57       </md-button>
  58     </div>
  59     <div flex layout="row" layout-align="space-between center">
  60       <div>
  61         <span class="selected-dispositions-count">
  62           <span>{{vm.selectedDispositions.length}}</span>
  63           <span translate="TOOLS.SELECTED">selected</span>
  64         </span>
  65         <md-menu class="select-menu" ng-if="!vm.currentThread">
  66           <md-button
  67             class="md-icon-button"
  68             ng-click="$mdOpenMenu($event)"
  69             aria-label="multi select toggle"
  70             translate
  71             translate-attr-aria-label="TOOLS.MULTI_SELECT_TOGGLE"
  72           >
  73             <md-icon md-font-icon="icon-menu-down"></md-icon>
  74           </md-button>
  75           <md-menu-content width="3">
  76             <md-menu-item>
  77               <md-button
  78                 ng-click="vm.selectAllDispositions()"
  79                 translate="TOOLS.SELECT_ALL"
  80               >
  81                 Select all
  82               </md-button>
  83             </md-menu-item>
  84             <md-menu-item>
  85               <md-button
  86                 ng-click="vm.deselectDispositions()"
  87                 translate="TOOLS.SELECT_NONE"
  88               >
  89                 Select none
  90               </md-button>
  91             </md-menu-item>
  92           </md-menu-content>
  93         </md-menu>
  94       </div>
  95       <div class="multi-select-actions">
  96         <button
  97           class="md-icon-button"
  98           ng-csv="vm.exportSelectedDispositions"
  99           csv-label="true"
 100           filename="dispositions.csv"
 101         >
 102           <md-icon md-font-icon="icon-file-excel"></md-icon>
 103         </button>
 104         <md-button
 105           class="md-icon-button"
 106           ng-if="vm.crudPermissions.canDelete"
 107           ng-click="vm.deleteSelectedDispositions($event)"
 108           aria-label="delete selected"
 109           translate
 110           translate-attr-label="TOOLS.DELETE_SELECTED"
 111         >
 112           <md-icon md-font-icon="icon-delete"></md-icon>
 113         </md-button>
 114       </div>
 115     </div>
 116   </div>
 117   <!-- / SELECTED BAR -->
 118   <!-- CONTENT -->
 119   <div class="content" md-background-bg layout="row" layout-align="start start">
 120     <!-- MAIN -->
 121     <div class="main scrollable" ms-scroll>
 122       <div layout="row">
 123         <div class="column" flex="20">
 124           <md-card>
 125             <md-card-content>
 126               <button
 127                 layout-align="center center"
 128                 md-mini-fab
 129                 ng-click="vm.query.level = null; vm.getDispositions()"
 130               >
 131                 <div layout="row" layout-align="start center">
 132                   <md-icon md-font-icon="icon-refresh"></md-icon>
 133                   <span class="ph-5"
 134                     >{{ 'TOOLS.ALL_DISPOSITIONS' | translate }}</span
 135                   >
 136                 </div>
 137               </button>
 138             </md-card-content>
 139           </md-card>
 140           <md-card>
 141             <md-card-content>
 142               <md-input-container class="md-block" flex-gt-sm="">
 143                 <label translate="TOOLS.SELECT_LEVEL">Select a level</label>
 144                 <md-select
 145                   placeholder="{{ 'TOOLS.SELECT_LEVEL' | translate }}"
 146                   ng-model="vm.query.level"
 147                   ng-change="vm.getDispositions()"
 148                 >
 149                   <md-option ng-value="null"
 150                     ><em translate="TOOLS.ALL">All</em></md-option
 151                   >
 152                   <md-option
 153                     ng-value="key"
 154                     ng-repeat="(key, value) in vm.levels"
 155                     >{{ value }}</md-option
 156                   >
 157                 </md-select>
 158               </md-input-container>
 159             </md-card-content>
 160           </md-card>
 161         </div>
 162         <!-- DISPOSITION TABLE -->
 163         <md-card flex="80">
 164           <md-table-container>
 165             <table
 166               md-table
 167               md-row-select
 168               multiple
 169               ng-model="vm.selectedDispositions"
 170               md-progress="vm.promise"
 171             >
 172               <thead
 173                 md-head
 174                 md-order="vm.query.sort"
 175                 md-on-reorder="vm.getDispositions"
 176               >
 177                 <tr md-row>
 178                   <th md-column md-order-by="id">
 179                     {{ 'TOOLS.ID' | translate }}
 180                   </th>
 181                   <th md-column md-order-by="level">
 182                     {{ 'TOOLS.LEVEL' | translate }}
 183                   </th>
 184                   <th md-column md-order-by="name">
 185                     {{ 'TOOLS.NAME' | translate }}
 186                   </th>
 187                   <th md-column md-order-by="description">
 188                     {{ 'TOOLS.DESCRIPTION' | translate }}
 189                   </th>
 190                   <th md-column width="10px"></th>
 191                 </tr>
 192               </thead>
 193               <tbody md-body>
 194                 <tr md-row ng-hide="vm.dispositions.rows.length">
 195                   <td md-cell colspan="5">
 196                     <div layout="row" layout-align="center center">
 197                       <span translate="TOOLS.NO_AVAILABLE_INFO"
 198                         >No Available Info</span
 199                       >
 200                     </div>
 201                   </td>
 202                 </tr>
 203                 <tr
 204                   md-row
 205                   md-select="disposition"
 206                   md-select-id="id"
 207                   ng-repeat="disposition in vm.dispositions.rows"
 208                 >
 209                   <td md-cell ng-if="disposition.userpic">
 210                     <img
 211                       class="avatar"
 212                       alt="{{disposition.name}}"
 213                       ng-src="api/users/{{disposition.id}}/avatar"
 214                     />
 215                   </td>
 216                   <td
 217                     md-cell
 218                     ng-if="!disposition.userpic && (vm.table == 'users' || vm.table == 'agents')"
 219                   >
 220                     <img
 221                       class="avatar"
 222                       alt="{{disposition.name}}"
 223                       ng-src="assets/images/avatars/profile.png"
 224                     />
 225                   </td>
 226                   <td
 227                     ng-click="vm.createOrEditDisposition($event, disposition)"
 228                     md-cell
 229                     class="id"
 230                   >
 231                     {{disposition.id}}
 232                   </td>
 233                   <td
 234                     ng-click="vm.createOrEditDisposition($event, disposition)"
 235                     md-cell
 236                     class="level"
 237                   >
 238                     {{ vm.levels[disposition.level] }}
 239                   </td>
 240                   <td
 241                     ng-click="vm.createOrEditDisposition($event, disposition)"
 242                     md-cell
 243                     class="name"
 244                   >
 245                     {{disposition.name}}
 246                   </td>
 247                   <td
 248                     ng-click="vm.createOrEditDisposition($event, disposition)"
 249                     md-cell
 250                     class="description"
 251                   >
 252                     {{disposition.description}}
 253                   </td>
 254                   <td
 255                     md-cell
 256                     class="actions"
 257                     ng-if="!vm.crudPermissions.readOnly"
 258                   >
 259                     <md-menu>
 260                       <md-button
 261                         class="md-icon-button"
 262                         aria-label="More"
 263                         translate
 264                         translate-attr-aria-label="TOOLS.MORE"
 265                         ng-click="$mdOpenMenu($event)"
 266                       >
 267                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 268                       </md-button>
 269                       <md-menu-content width="3">
 270                         <!-- SUBACTIONS -->
 271                         <!-- ACTIONS -->
 272                         <md-menu-item ng-if="vm.crudPermissions.canEdit">
 273                           <md-button
 274                             ng-click="vm.createOrEditDisposition($event, disposition)"
 275                             translate="TOOLS.EDIT_DISPOSITION"
 276                           >
 277                             Edit Disposition
 278                           </md-button>
 279                         </md-menu-item>
 280                         <!-- SUBACTIONS -->
 281                         <!-- ACTIONS -->
 282                         <md-menu-item ng-if="vm.crudPermissions.canDelete">
 283                           <md-button
 284                             ng-click="vm.deleteconfirm(disposition, $event)"
 285                             translate="TOOLS.DELETE_DISPOSITION"
 286                           >
 287                             Delete Disposition
 288                           </md-button>
 289                         </md-menu-item>
 290                       </md-menu-content>
 291                     </md-menu>
 292                   </td>
 293                 </tr>
 294               </tbody>
 295             </table>
 296           </md-table-container>
 297           <md-table-pagination
 298             md-label="{page: '{{'TOOLS.PAGE' | translate}}:', rowsPerPage: '{{'TOOLS.ROWSPERPAGE' | translate}}:', of: '{{'TOOLS.OF' | translate}}'}"
 299             md-limit="vm.query.limit"
 300             md-limit-options="[10, 15, 20, 50, 100, 250]"
 301             md-page="vm.query.page"
 302             md-total="{{vm.dispositions.count}}"
 303             md-on-paginate="vm.getDispositions"
 304             md-page-select
 305           >
 306           </md-table-pagination>
 307         </md-card>
 308         <!-- / DISPOSITION TABLE -->
 309       </div>
 310       <!-- NO RESULTS -->
 311       <!-- / NO RESULTS -->
 312     </div>
 313     <!-- / MAIN -->
 314   </div>
 315   <!-- / CONTENT -->
 316   <!-- ADD DISPOSITION BUTTON -->
 317   <md-button
 318     ng-if="vm.crudPermissions.canEdit"
 319     class="md-fab md-accent"
 320     id="add-disposition-button"
 321     ng-click="vm.createOrEditDisposition($event)"
 322     aria-label="add disposition"
 323     translate
 324     translate-attr-aria-label="TOOLS.ADD_DISPOSITION"
 325   >
 326     <md-icon md-font-icon="icon-plus"></md-icon>
 327   </md-button>
 328   <!-- / ADD DISPOSITION BUTTON -->
 329 </div>